<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>几个注意点</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h3>{{msg}}</h3>
			<school></school>
			<!-- <school/> -->
		</div>
		<script type="text/javascript">
		
			// 定义组件
			const school = Vue.extend({
				// 可以使用 name 配置项指定组件在开发者工具汇中呈现的名字
				name:'yhw',
				template:`
					<div>
						<h2>学校名称:{{schoolName}}</h2>
						<h2>学校地址:{{address}}</h2>
					</div>
				`,
				// 组件定义时，一定不要写el配置项，最终所有组件都要被一个vm管理，由vm决定服务于哪个容器
				// el:'#root',
				// data 要写成函数式
				data(){
					return{
						schoolName:'重庆工程学院',
						address:'重庆市巴南区',
					};
				},
			});
			
			new Vue({
				el:'#root',
				data:{
					msg:'欢迎学习!'
				},
				// 局部注册组件
				components:{
					// 组件名字由冒号前面的决定
					// 官方推荐，组件名是多个的情况下，用 - 连接 但要用引号包裹
					school:school,
				}
			})
		</script>
	</body>
</html>
